<template>
  <!-- http://localhost:8000/#/childList?parentMobile=13070826311 -->
  <view class="inspectProjectChild">
    <view class="content flex">
      <view class="head-box flex">
        <view class="head-back flex">
          <!-- <view class="icon iconfont icon-arrow_back"></view> -->
        </view>
        <view class="head-title flex">儿童信息</view>
        <view class="head-right flex"></view>
      </view>
      <view class="content-box">
        <view v-if="childList.length > 0 && !addShow">
          <view v-for="(item, index) in childList" :key='index' class="child-student" @click="toDetail(item)">
            <u-row style='padding: 1rem;flex-wrap: wrap;'>
              <u-col span="6" class="des">
                <view class="des-title">姓名：</view>{{ item.name }}
              </u-col>
              <u-col span="6" class="des">
                <view class="des-title">性别：</view>{{ item.sex }}
              </u-col>
              <u-col span="6" class="des">
                <view class="des-title">年龄：</view>{{ item.birthday }}
              </u-col>
              <u-col span="6" class="des">
                <view class="des-title">入学年份：</view>{{ item.year }}
              </u-col>
              <u-col span="6" class="des">
                <view class="des-title">年级：</view>{{ item.grade }}
              </u-col>
              <u-col span="6" class="des">
                <view class="des-title">班级：</view>{{ item.classs }}
              </u-col>
              <u-col span="12" class="des">
                <view class="des-title">学校：</view>{{ item.school }}
              </u-col>
              <!-- <u-col span="12" class="des">
                <view class="des-title">地址：</view>{{ item.address }}
              </u-col> -->
              <u-col span="12" class="des">
                <view class="des-title">联系电话：</view>{{ item.mobile }}
              </u-col>
              <!-- <u-col span="12" class="des">
                <view class="des-title">身份证号：</view>{{ item.idCard }}
              </u-col> -->
            </u-row>
            <view class="icon iconfont icon-zinv"></view>
            <view class='viewBox'>查看>></view>
          </view>
          <view class="flex" style="padding: 1rem 0; width: 100%;">
            <u-button type="primary" class="colorStyle" color='#00b99e' @click="addShow = !addShow" size="primary">绑定其他子女</u-button>
          </view>
        </view>
        <view v-if="childList.length == 0 || addShow" class="child-student">
          <p class="student-title">请检索子女相关信息并绑定</p>
          <u-form ref="searchForm" :model="searchForm" label-width="6rem" label-position='top'>
            <u-form-item label="姓名：">
              <u-input v-model="searchForm.name" placeholder="请输入姓名"></u-input>
            </u-form-item>
            <!-- <u-form-item label="身份证号：" prop="idCard">
              <u-input v-model="searchForm.idCard" placeholder="请输入身份证号"></u-input>
            </u-form-item> -->
            <u-form-item label="联系电话：">
              <u-input v-model="searchForm.mobile" placeholder="请输入联系电话"></u-input>
            </u-form-item>
            <u-form-item label="" label-width="0rem">
              <view class="flex" style='width: 100%;'>
                <u-button type="primary" class="colorStyle" size="normal" color='#00b99e' @click="searchHandle('searchForm')">检索</u-button>
              </view>
            </u-form-item>
          </u-form>
          <p class="borderBoxBottom"></p>
          <view class="search-child" v-if="searchChild.id">
            <u-row style='padding: 1rem;flex-wrap: wrap;'>
              <u-col span="6" class="des">
                <view class="des-title">姓名：</view>{{ searchChild.name }}
              </u-col>
              <u-col span="6" class="des">
                <view class="des-title">性别：</view>{{ searchChild.sex }}
              </u-col>
              <u-col span="6" class="des">
                <view class="des-title">年龄：</view>{{ searchChild.birthday }}
              </u-col>
              <u-col span="6" class="des">
                <view class="des-title">入学年份：</view>{{ searchChild.year }}
              </u-col>
              <u-col span="6" class="des">
                <view class="des-title">年级：</view>{{ searchChild.grade }}
              </u-col>
              <u-col span="6" class="des">
                <view class="des-title">班级：</view>{{ searchChild.classs }}
              </u-col>
              <u-col span="6" class="des">
                <view class="des-title">联系电话：</view>{{ searchChild.mobile }}
              </u-col>
              <u-col span="12" class="des">
                <view class="des-title">学校：</view>{{ searchChild.school }}
              </u-col>
              <!-- <u-col span="12" class="des">
                <view class="des-title">地址：</view>{{ searchChild.address }}
              </u-col> -->
              
              <!-- <u-col span="12" class="des">
                <view class="des-title">身份证号：</view>{{ searchChild.idCard }}
              </u-col> -->
            </u-row>
          </view>
          <view class="search-child-no-data flex" v-else>
            <view class="icon iconfont icon-zanwushuju-copy"></view>
            暂无数据
          </view>
          <view class="flex">
            <u-button v-if="childList.length > 0" @click="addShow = !addShow" size="normal" style="flex: 1;margin: 0 10px;">返回</u-button>
            <u-button :disabled='!searchChild.id' type="primary" @click="bindHandle" size="normal" style="flex: 1;margin: 0 10px;" color='#00b99e'>绑定</u-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import mRequest from "@/api/index";
export default {
  data () {
    return {
      parentMobile: '',
       // 展示新增
      addShow: false,
      childList: [],
      searchForm: {
        name: '',
        mobile: ''
      },
      // searchForm: {
      //   name: '黄金',
      //   mobile: '13200001231'
      // },
      searchFormRules: {
        name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        // idCard: [
        //     { required: true, message: '请输入身份证号', trigger: 'blur' }
        // ],
        mobile: [
            { required: true, message: '请输入联系电话', trigger: 'blur' }
        ]
      },
      searchChild: {}
    }
  },
  methods: {
    toDetail (item) {
      uni.navigateTo({
        url: `/pages/home-main/inspect-list?info=${JSON.stringify(item)}`
      })
    },
    getChild () {
      if(!this.parentMobile){
        uni.showToast({
          icon: 'none',
          title: '未查询到家长联系电话'
        });
        return
      }
      let params = {
        limit: 1000,
          page: 1,
          parentMobile: this.parentMobile
      }
      mRequest.studentListParent(params).then(res=>{
        console.log(res)
        this.childList = res.page.records
      })
    },
    // 绑定
    bindHandle () {
      if(!this.parentMobile){
        uni.showToast({
          icon: 'none',
          title: '未查询到家长联系电话'
        });
        return
      }
      let params = {
        studentId: this.searchChild.id,
        parentMobile: this.parentMobile
      }
      mRequest.familySave(params).then(res=>{
        if (res.code === 0) {
          this.searchForm = {
            name: '',
            idCard: '',
            mobile: ''
          }
          uni.showToast({
            icon: 'success',
            title: '绑定成功'
          });
          setTimeout(() => {
            this.addShow = false
            this.getChild()
          }, 1000)
        }
      })
    },
    // 检索
    searchHandle (formName) {
      if(!this.searchForm.name){
        uni.showToast({
          icon: 'none',
          title: '请输入姓名'
        });
        return
      }
      if(!this.searchForm.mobile){
        uni.showToast({
          icon: 'none',
          title: '请输入联系电话'
        });
        return
      }
      let params = Object.assign(this.searchForm, {
        limit: 1000,
        page: 1
      })
      mRequest.studentList(params).then(res=>{
        this.searchChild = res.page.records[0]
      })
			
    }
  },
  onLoad (options) {
    this.parentMobile = options.parentMobile || ''
    // this.parentMobile = options.parentMobile || '13070826311'
    this.getChild()
  }
}
</script>
<style lang='scss'>
.colorStyle{
  width: 100%
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.head-box{
  height: 3rem;
  width: 100%;
  background: #fff;
  justify-content: space-between;
  .head-back{
    width: 2rem;
    height: 100%;
  }
  .head-title{
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
  }
  .head-right{
    width: 2rem;
    height: 100%;
  }
}
.content-box{
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  overflow: auto;
  padding: 0.5rem !important;
  .child-student{
    margin: 1rem 0;
    padding: 0.5rem;
    background: #fff;
    border-radius: 0.5rem;
    font-size: 1rem;
    position: relative;
    .des{
      padding: 0.3rem 0;
      font-weight: 600;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
    }
    .des-title{
      font-weight: 500;
      color: #666;
      font-size: 0.95rem;
    }
    .icon-zinv{
      font-size: 4rem;
      position: absolute;
      bottom: 0;
      right: 0;
      color: #c2dcc150;
    }
    .viewBox{
      font-size: 1rem;
      position: absolute;
      bottom: 1.8rem;
      right: 1rem;
      color: #00b99e;
      border-bottom: 1px solid #00b99e;

    }

    .student-title{
      font-size: 1rem;
      font-weight: 600;
      text-indent: 0.5rem;
      margin: 1rem 0 1rem;
    }
    .borderBoxBottom{
      border-bottom: 0.3rem dotted #9cc7ae60;
      width: 100%;
    }
    .search-child-no-data{
      height: 12rem;
      width: 100%;
      flex-direction: column;
      color: #999;
      font-size: 0.7rem;
      .icon-zanwushuju-copy{
        font-size: 3rem;
      }
    }
  }
}
.inspectProjectChild {
  height: 100vh;
  width: 100%;
  background: #f5f5f5;
  overflow: auto;
  .content {
    position: relative;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    background: linear-gradient(to bottom, #c2dcc1 20%, #f5f5f5 60%, #f5f5f5 90%, #c2dcc1 100%);
    // padding: 1rem;
    height: 100vh;
    flex-direction: column;
  }
}
</style>